<div>
  {{ $sectionNum := (len .Pages) }}

  {{ if gt $sectionNum 0 }}
    <div class="showcase__box--wrapper" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
      {{ $category := .Params.category }}
      {{ $categoryIcon := (print "svgs/showcase/" (.Params.categoryIcon | default "code") ".svg") }}
      {{ range .Pages }}
        <div class="showcase__box" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
          <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
          <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
            {{ .Title }}
          </a>
          
          {{ if .Params.thumb }}
          <a href="{{ .Params.Link }}" class="showcase__box--img" target="_blank" rel="noreferrer">
            <img src="{{ (print "images/" .Params.thumb) | relURL }}" alt="{{ .Title }}">
          </a>
          {{ end }}

          <div class="showcase__box--desc">
            {{ .Description | markdownify }}
          </div>
          <div class="grow"></div>
          <div class="showcase__box--meta">
            <span class="type">
              {{ partial $categoryIcon (dict "width" 14 "height" 14) }}
              {{ $category }}
            </span>
            <div class="grow"></div>
            {{ range .Params.links }}
              {{ $icon := (print "svgs/showcase/" (.icon | default "code") ".svg") }}
              <a href="{{ .link }}" class="type" target="_blank" rel="noreferrer">
                {{ partial $icon (dict "width" 14 "height" 14) }}
                {{ .name }}
              </a>
            {{ end }}
            {{ with .Params.repo }}
              <a href="{{ . }}" class="type" target="_blank" rel="noreferrer">
                {{ partial "svgs/social/github.svg" (dict "width" 14 "height" 14) }}
                Repository
              </a>
            {{ end }}
          </div>
          {{ with .Params.shields }}
            <div class="showcase__box--shields">
              {{ range . }}
                <a href="{{ .link }}" class="type" target="_blank" rel="noreferrer">
                  <img src="{{ .image }}" alt="{{ .name }}">
                </a>
              {{ end }}
            </div>
          {{ end }}
        </div>
      {{ end }}
    </div>
  {{ end }}
</div>